import React, {Component} from 'react';
import {Carousel} from 'antd'
import './style.css'

const imgs = [
    'http://47.99.130.140/imgs/wallhaven-p8r1e9.jpg',
    'http://47.99.130.140/imgs/wallhaven-e7zyy8.jpg',
    'http://47.99.130.140/imgs/wallhaven-6k9e7q.jpg',
    'http://47.99.130.140/imgs/photo.jpg',
]
  

class Home extends Component {
    render() {
        return (
            <div style={styles.bg} className='home'>
                <Carousel arrows effect='fade' className='size'>
                    {imgs.map(item=><div key={item}><div className='size' style={{backgroundImage:`url(${item})`}}/></div>)}
                    {/*不用img标签是因为图片大小会出现问题*/}
                </Carousel>
            </div>
        );
    }
}

const styles = {
    bg:{
        // position:
        top:0,
        left:0,
        width:'100%',
        height:'calc(100vh - 64px)'
    }
}
  

export default Home;